<template>
    <van-skeleton title :row="3" v-if="gj" />
    <div v-else>
        <van-nav-bar title="首页" left-text="返回" left-arrow @click-left="onClickLeft" />

        <!-- 搜索 -->
        <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" @search="ss" />

        <!-- 标签页 -->

        <van-tabs v-model:active="active">
            <van-tab title="标签 1">

                <!-- 轮播图 -->

                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in images" :key="image">
                        <img :src="image" style="width: 100%; height: 200px;" />
                    </van-swipe-item>
                </van-swipe>
                <!-- 宫格 -->
                <van-grid>
                    <van-grid-item v-for="item in dh" :icon="item.image_src" :text="item.name" />

                </van-grid>
            </van-tab>
            <van-tab title="标签 2">内容 2</van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
            <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>




    </div>

    <div class="box">
        <div class="box1">
            <div style="width: 170px;height: 160px;background-color: sandybrown;"></div>
            <div style="width: 170px;height: 130px;background-color: sandybrown;"></div>
             <div style="width: 170px;height: 160px;background-color: sandybrown;"></div>
            <div style="width: 170px;height: 130px;background-color: sandybrown;"></div>
           

        </div>

         <div class="box2">
           <div style="width: 170px;height: 180px;background-color: sandybrown;"></div>
            <div style="width: 170px;height: 130px;background-color: sandybrown;"></div>
             <div style="width: 170px;height: 180px;background-color: sandybrown;"></div>
            <div style="width: 170px;height: 130px;background-color: sandybrown;"></div>
            


        </div>

    </div>
</template>

<script setup>
let gj = ref(true);
setInterval(() => {
    gj.value = false
}, 2000)
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',

    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];

import { catitemsApi } from '@/api/api';
import { ref } from 'vue';
let dh = ref([]);
catitemsApi().then(res => {
    console.log(res);

    dh.value = res.data.message;

})

import { useRouter } from 'vue-router';

let routerApi = useRouter();

let ss = () => {
    routerApi.push('/ss')
}

</script>

<style lang="scss" scoped>
.box {
    width: 300px;
    height: 300px;
  
    margin: 0 auto;
}

.box1 {
    width: 150px;
    height: 300px;
    
    float: left;

    div {
        margin-top: 5px;
     
        margin-left: 10px;
    }
}

.box2 {
    width: 150px;
    height: 300px;
  
    float: left;

    div {
        margin-top: 5px;
      
        margin-left: 10px;
    }
}
</style>